<script setup lang="ts">
import type { ThemeColorOption } from '@/composables/types/theme'

const { 
  showThemeColorSheet,
  closeThemeColorPicker,
  selectThemeColor,
  themeColorOptions,
  currentThemeColor
} = useManualTheme()

// 选择主题色
function handleThemeColorSelect(option: ThemeColorOption) {
  selectThemeColor(option)
  
  // 反馈效果
  uni.vibrateShort()
  
  // 显示成功提示
  setTimeout(() => {
    uni.showToast({ 
      title: `已切换到${option.name}`, 
      icon: 'success',
      duration: 1500
    })
  }, 200)
}
</script>

<template>
  <!-- 主题色选择器 ActionSheet -->
  <wd-action-sheet
    v-model="showThemeColorSheet"
    :actions="[]"
    @close="closeThemeColorPicker"
  >
    <template #title>
      <view class="py-4">
        <view class="text-lg font-bold text-gray-800">选择主题色</view>
        <view class="text-sm text-gray-500 mt-1">个性化您的应用外观</view>
      </view>
    </template>
    
    <!-- 主题色网格 -->
    <view class="px-4 pb-6">
      <view class="grid grid-cols-3 gap-4">
        <view
          v-for="option in themeColorOptions"
          :key="option.value"
          class="flex flex-col items-center p-4 rounded-lg border-2 transition-all duration-200 active:scale-95"
          :class="{
            'border-current shadow-lg scale-105 bg-gray-50': currentThemeColor.value === option.value,
            'border-gray-200 hover:border-gray-300 hover:bg-gray-50': currentThemeColor.value !== option.value
          }"
          :style="{ 
            color: currentThemeColor.value === option.value ? option.primary : '#6b7280',
            borderColor: currentThemeColor.value === option.value ? option.primary : undefined
          }"
          @click="handleThemeColorSelect(option)"
        >
          <!-- 颜色圆形 -->
          <view 
            class="w-12 h-12 rounded-lg mb-2 shadow-md flex items-center justify-center relative transition-transform duration-200"
            :class="{
              'scale-110 shadow-lg': currentThemeColor.value === option.value
            }"
            :style="{ backgroundColor: option.primary }"
          >
            <!-- 选中状态的勾选图标 -->
            <wd-icon
              v-if="currentThemeColor.value === option.value"
              name="check"
              size="20px"
              color="white"
            />
          </view>
          
          <!-- 主题色名称 -->
          <text class="text-sm font-medium text-center">{{ option.name }}</text>
          
          <!-- 色值显示 -->
          <text class="text-xs text-gray-400 mt-1">{{ option.primary }}</text>
        </view>
      </view>
      
      <!-- 说明文本 -->
      <view class="mt-4 p-3 rounded-md" :style="{ backgroundColor: currentThemeColor.primary + '1a' }">
        <view class="flex items-start gap-2">
          <wd-icon name="help" size="16px" :color="currentThemeColor.primary" class="mt-0.5" />
          <view class="flex-1">
            <text class="text-sm font-medium block" :style="{ color: currentThemeColor.primary }">温馨提示</text>
            <text class="text-xs mt-1" :style="{ color: currentThemeColor.primary }">主题色会应用到按钮、链接等交互元素，让您的应用更具个性。</text>
          </view>
        </view>
      </view>
    </view>
  </wd-action-sheet>
</template>